<script>
	function add(a, b) {
		return a + b;
	}
</script>

<script setup>
	// <script setup>写的任何代码都相当于写在 setup(){...}函数内部
	// 定义在setup的最外层的东西都是直接对模板暴露的

	import { ref, reactive, toRefs, onMounted, watch } from "vue";

	// 引入的子组件在<script setup>的最外层=>已经直接暴露给模板（无需注册子组件）
	import Child1 from "./Child1.vue";
	import Child2 from "./Child2.vue";
	import Child3 from "./Child3.vue";

	// countRef 
	const countRef = ref(100);

	function addCount() {
		countRef.value++;
	}

	const state = reactive({
		name: "steve",
	});

	// name
	const { name } = toRefs(state);

	console.log(add(10, 20));

	function onChange(info) {
		console.log("on change", info);
	}

	function onDelete(info) {
		console.log("on delete", info);
	}

	// child3Ref
	const child3Ref = ref(null);

	onMounted(() => {
		// 拿到 Child3 组件的一些数据
		console.log(child3Ref.value);

		// 拿到子组件暴露出来的数据
		console.log(child3Ref.value.a);
		console.log(child3Ref.value.b);
	});

</script>

<template>
	<div>
		<p @click="addCount">{{ countRef }}</p>
		<p>{{ name }}</p>

		<child-1></child-1>
		<hr />

		<!-- 父子通信：prop-down -->
		<!-- 子父通信：events-up -->
		<child-2
			:name="name"
			:age="countRef"
			@change="onChange"
			@delete="onDelete"
		></child-2>
		<hr />

		<child-3 ref="child3Ref"></child-3>
	</div>
</template>
